<script setup>
import { onMounted, ref } from 'vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile as TileLayer , Vector as VectorLayer } from 'ol/layer'
import { XYZ } from 'ol/source'
import { Fill, Stroke, Style } from 'ol/style'
import {useCityStore} from '@/stores/city'
import  {app} from '@/main'
import {setGeoLayer} from '@/utils/setGeoLayer'
const cityStore = useCityStore()
const gaode_vector = new TileLayer({
  title: '矢量',
  source: new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
  }),
});
const vector=new VectorLayer({
    style: new Style({
      fill: new Fill({
        color: 'rgba(0,0,0,0.3)'
      }),
      stroke: new Stroke({
        color: 'red',
        width: 2
      }),
    })
})

onMounted(() => {
    const map = new Map({
      target:'map',
      layers: [gaode_vector,vector],
      view: new View({
        center: [116.397428, 39.90816],
        zoom: 4,
        projection: "EPSG:4326",
      })
    })
    app.config.globalProperties.$map = map
    //cityStore.nowCity='北京'
    setGeoLayer(map,cityStore.nowCity)
})
</script> 
<template>
    <div id="map"></div>
 </template> 
<style scoped>
#map {
    height: 100vh;
    width: 100vw;
}
</style>